import React, {Component} from 'react'
import {Flex, WingBlank, WhiteSpace, NavBar, Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
import styles from './index.module.css'
import request from '../../utils/api.js'
import {withFormik} from 'formik'
import * as yup from 'yup'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{3,8}$/
const REG_PWD = /^[a-zA-Z_\d]{3,12}$/

class Login extends Component {

    render() {
        // const { username, password } = this.state
        let {
            values,
            handleChange,
            handleSubmit,
            // 错误信息
            errors,
            // 表单是否被访问过
            touched,
            // 判断是否访问必须绑定该函数
            handleBlur
        } = this.props
        return (
            <div className={styles.root}>
                {/* 顶部导航 */}
                <NavBar className={styles.navHeader} mode="dark">
                    账号登录
                </NavBar>
                <WhiteSpace size="xl"/>

                {/* 登录表单 */}
                <WingBlank>
                    <form>
                        <div className={styles.formItem}>
                            <input
                                onBlur={handleBlur}
                                value={values.username}
                                onChange={handleChange}
                                className={styles.input}
                                name="username"
                                placeholder="请输入账号"
                            />
                        </div>
                        {/* 长度为5到8位，只能出现数字、字母、下划线 */}
                        {/* <div className={styles.error}>账号为必填项</div> */}
                        {touched.username&&errors.username&&<div className={styles.error}>{errors.username}</div>}
                        <div className={styles.formItem}>
                            <input
                                value={values.password}
                                onChange={handleChange}
                                className={styles.input}
                                name="password"
                                type="password"
                                placeholder="请输入密码"
                            />
                        </div>
                        {touched.password&&errors.password&&<div className={styles.error}>{errors.password}</div>}
                        {/* 长度为5到12位，只能出现数字、字母、下划线 */}
                        {/* <div className={styles.error}>账号为必填项</div> */}
                        <div className={styles.formSubmit}>
                            <button onClick={handleSubmit} className={styles.submit} type="button">
                                登 录
                            </button>
                        </div>
                    </form>
                    <Flex className={styles.backHome}>
                        <Flex.Item>
                            <Link to="/registe">还没有账号，去注册~</Link>
                        </Flex.Item>
                    </Flex>
                </WingBlank>
            </div>
        )
    }
}

// export default Login
export default withFormik({
    mapPropsToValues: () => ({username: '', password: ''}),
    // 控制表单验证 =》 方法一
    // validate: (values) => {
    //     // values表示所有表单数据
    //     // errors表示验证的结果
    //     let errors = {}
    //     if (!values.username) {
    //         // 如果用户名是空的，就提示相应信息
    //         errors.username = '用户名不能为空'
    //     } else if (!REG_UNAME.test(values.username)) {
    //         errors.username = '用户名必须是3-8个字符'
    //     }
    //     if (!values.password) {
    //         errors.password = '密码不能为空'
    //     } else if (!REG_PWD.test(values.password)) {
    //         errors.password = '密码必须是3-12个字符'
    //     }
    //     return errors
    // },

    // 方法二：
    validationSchema: yup.object().shape({
        // 处理表单项的验证
        username: yup.string().matches(REG_UNAME, '用户名必须是3-8位字符数字下划线组成的字符串!').required('用户名不能为空!'),
        password: yup.string().matches(REG_PWD, '密码必须是3-12位字符数字下划线组成的字符串!').required('密码不能为空!')
    }),
    handleSubmit: async (values, login) => {
        console.log(values.username, values.password)
        // 参数一表示表单数据；参数二表示组件的实例对象
        // 提交表单
        const res = await request({
            method: 'post',
            url: '/user/login',
            data: {
                username: values.username,
                password: values.password
            }
        })
        if (res.status === 200) {
            // 登录成功，缓存token,跳转到主页
            sessionStorage.setItem('mytoken', res.body.token)
            login.props.history.push('/home/my')
        } else {
            // 登录失败
            Toast.info(res.description, 1)
        }
    }
})(Login)
